<!--
 * @Description: 内控计划实施管理
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-11-09 11:08:01
 * @LastEditTime: 2023-01-12 10:29:01
 * @FilePath: \cscec-pms-admin\src\views\construction\constructionSchedule\implementationManagement.vue
-->
<template>
  <base-breadcrumb>
    <!-- 内控计划看板 -->
    <a-card>
      <div class="title-wrapper">
        <title-name title="内控计划看板" />
        <a-icon
          :type="planBoardVisible ? 'up' : 'down'"
          @click="planBoardVisible = !planBoardVisible"
        />
      </div>
      <ul class="master-plan-list">
        <li
          v-for="({label,value,img},index) in masterPlanList"
          :key="index"
          @click="handleNodeInfo(index,label)"
        >
          <div>
            <span>{{ label }}</span>
            <p>{{ value }}<i v-if="index<2">%</i></p>
          </div>
          <img
            :src="img"
            alt=""
          >
        </li>
      </ul>
      <NodeDetail
        v-show="planBoardVisible"
        :visible="planBoardVisible"
        :api-code="apiCode"
      />
      <NodeInfo
        :visible.sync="nodeInfoVisible"
        :data="nodeInfoData"
        :title="nodeInfoTitle"
        :ready="nodeInfoReady"
      />
    </a-card>
    <!-- 内控计划看板 -->
    <!-- 内控计划日历表 -->
    <a-card>
      <div class="title-wrapper">
        <title-name title="内控计划日历表" />
        <a-icon
          :type="planBoardCalendarVisible ? 'up' : 'down'"
          @click="planBoardCalendarVisible = !planBoardCalendarVisible"
        />
      </div>
      <PlanBoardCalendar
        ref="planBoardCalendar"
        v-show="planBoardCalendarVisible"
        :api-code="apiCode"
        @synchronousUpdate="synchronousUpdateDetail"
      />
    </a-card>
    <!-- 内控计划日历表 -->
    <!-- 内控计划详情 -->
    <a-card>
      <div class="title-wrapper">
        <title-name title="内控计划详情" />
        <a-icon
          :type="planBoardDetailVisible ? 'up' : 'down'"
          @click="planBoardDetailVisible = !planBoardDetailVisible"
        />
      </div>
      <PlanBoardDetail
        ref="planBoardDetail"
        :visible="planBoardDetailVisible"
        :api-code="apiCode"
        @synchronousUpdate="synchronousUpdateCalendar"
      />
    </a-card>
    <!-- 内控计划详情 -->
    <!-- 历史调整记录 -->
    <a-card>
      <title-name title="历史调整记录" />
      <a-spin :spinning="historyAdjustLoading">
        <u-table
          ref="table"
          fixed-columns-roll
          :height="500"
          show-header-overflow
          row-id="id"
          :use-virtual="true"
          border
        >
          <u-table-column
            type="index"
            width="100"
            label="序号"
            align="center"
            fixed
          />
          <u-table-column
            v-for="item in columns5"
            :key="item.dataIndex"
            :prop="item.dataIndex"
            :label="item.title"
            :width="item.width"
            align="center"
          >
            <template v-slot="{ row }">
              <template v-if="item.dataIndex === 'fileInfoList'">
                <a-popover
                  v-for="item in row[item.dataIndex]"
                  :key="item.fileId"
                  placement="top"
                >
                  <template slot="content">
                    <a
                      :fileId="item.fileId"
                      :fileName="item.fileName"
                      :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + item.fileId"
                      target="_parent"
                    >下载</a>
                    <a-divider type="vertical" />
                    <a
                      :key="item.fileId"
                      @click="$filePreview(item)"
                    >查看</a>
                  </template>
                  <a-button
                    size="small"
                    type="link"
                  >
                    {{ item.fileName }}
                  </a-button>
                </a-popover>
              </template>
              <span
                v-else
                :title="row[item.dataIndex]"
              >{{ row[item.dataIndex] }}</span>
            </template>
          </u-table-column>
          <u-table-column
            key="operation"
            prop="operation"
            label="操作"
            width="100"
            align="center"
            :fixed="'right'"
          >
            <template v-slot="{ row }">
              <a
                v-btnPermission="'pm_009_loo_04'"
                @click="handleView(row)"
              >查看</a>
            </template>
          </u-table-column>
        </u-table>
      </a-spin>
    </a-card>
    <!-- 历史调整记录 -->
    <div class="page-btn-right-top">
      <a-button @click="$close">
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>
<script>
import { masterPlanList, overdueList, accomplishList, infoList, accomplishQuantityList, columns5 } from './model.js'
import PlanBoardCalendar from './components/PlanBoardCalendar'
import NodeDetail from './components/NodeDetail'
import PlanBoardDetail from './components/PlanBoardDetail'
import NodeInfo from './components/NodeInfo'
import constructionSchedule from '@/api/construction/constructionSchedule'
import { UTable, UTableColumn } from 'umy-ui'
import Vue from 'vue'
export default {
  name: 'ImplementationManagement' + Date.now(),
  components: {
    PlanBoardCalendar,
    NodeDetail,
    NodeInfo,
    PlanBoardDetail,
    UTable,
    UTableColumn
  },
  data() {
    return {
      // 内控计划看板显示隐藏
      planBoardVisible: false,
      // 内控计划
      masterPlanList,
      // 节点逾期情况
      overdueList,
      // 节点按时完成率情况
      accomplishList,
      // 节点基本信息统计
      infoList,
      // 节点完成数量统计
      accomplishQuantityList,
      // 内控计划日历表显示隐藏
      planBoardCalendarVisible: true,
      // 内控计划详情显示隐藏
      planBoardDetailVisible: false,
      // 历史调整记录表头
      columns5,
      // 历史调整记录加载
      historyAdjustLoading: false,
      token: void 0,
      // 是否EPC
      isEPC: false,
      // 节点信息显示隐藏
      nodeInfoVisible: false,
      // 节点信息数据
      nodeInfoData: [],
      // 节点信息加载完成
      nodeInfoReady: true,
      // 节点信息标题
      nodeInfoTitle: '',
      // 项目id
      projectId: this.$route.query.projectId + '' || '',
      // 接口代码 0：总计划，2：竣工收尾计划
      apiCode: 0
    }
  },
  mounted() {
    this.token = Vue.getAcloudProvider().getAccessToken()
    this.getData()
  },
  methods: {
    /**
     * @description: 获取数据
     * @param {void}
     * @return {void}
     */
    getData() {
      // 获取内控计划看板显示数据
      constructionSchedule.implementationKanbanShow(this.projectId).then(({ code, data: { onTimeCompleteRate, completeRate, overdueFirstNodeNum, overdueSecondNodeNum, overdueThreeNodeNum, durationDelayDay, isEPC } }) => {
        if (code === 200) {
          this.masterPlanList[0].value = onTimeCompleteRate
          this.masterPlanList[1].value = completeRate
          this.masterPlanList[2].value = overdueFirstNodeNum
          this.masterPlanList[3].value = overdueSecondNodeNum
          this.masterPlanList[4].value = overdueThreeNodeNum
          this.masterPlanList[5].value = durationDelayDay
          this.isEPC = isEPC
        }
      })
      // 获取内控计划历史调整记录
      this.historyAdjustLoading = true
      constructionSchedule
        .masterPlanHistoryAdjust(this.projectId)
        .then(({ code, data }) => {
          if (code === 200) {
            this.$refs.table.reloadData(data)
          } else {
            this.$refs.table.reloadData([])
          }
        })
        .finally(() => {
          this.historyAdjustLoading = false
        })
    },
    /**
     * @description: 获取节点按时完成率
     * @param {array} list 信息列表
     * @param {object} info 信息对象
     * @param {string} label 信息标题
     * @return {void}
     */
    getOnTimeCompleteRateDetail(list, info, label) {
      this.nodeInfoReady = true
      constructionSchedule
        .onTimeCompleteRateDetail(this.projectId)
        .then(({ code, data }) => {
          if (code === 200) {
            this.infoUpdate(list, data, info, label)
          }
        })
        .finally(() => {
          this.nodeInfoReady = false
        })
    },
    /**
     * @description: 获取节点完成率
     * @param {array} list 信息列表
     * @param {object} info 信息对象
     * @param {string} label 信息标题
     * @return {void}
     */
    getCompleteRateDetail(list, info, label) {
      this.nodeInfoReady = true
      constructionSchedule
        .completeRateDetail(this.projectId)
        .then(({ code, data }) => {
          if (code === 200) {
            this.infoUpdate(list, data, info, label)
          }
        })
        .finally(() => {
          this.nodeInfoReady = false
        })
    },
    /**
     * @description: 更新节点完成信息
     * @param {void}
     * @return {void}
     */
    infoUpdate(list, data) {
      this.nodeInfoData = list
        .map((el) => {
          for (let item in data) {
            if (el.name === item) {
              el.value = data[item]
            }
          }
          return el
        })
        .filter((el) => {
          if (el.hasOwnProperty('isEPC')) {
            if (this.isEPC) {
              return el
            }
          } else {
            return el
          }
        })
    },
    /**
     * @description: 跳转节点信息
     * @param {number} level 节点等级
     * @param {string} label 字段名称
     * @return {void}
     */
    handleNodeInfo(level, label) {
      const list = [
        [
          {
            name: 'onTimeCompleteRate_SGZB',
            label: '施工准备类节点',
            value: void 0
          },
          {
            name: 'onTimeCompleteRate_SJ',
            label: '设计类节点',
            value: void 0
          },
          {
            name: 'onTimeCompleteRate_ZC',
            label: '招采类节点',
            value: void 0
          },
          {
            name: 'onTimeCompleteRate_GC',
            label: '工程类节点',
            value: void 0
          },
          {
            name: 'onTimeCompleteRate_JGYS',
            label: '竣工验收类节点',
            value: void 0
          }
        ],
        [
          {
            name: 'firstNodeCompleteRate',
            label: '一级节点',
            value: void 0
          },
          {
            name: 'secondNodeCompleteRate',
            label: '二级节点',
            value: void 0
          },
          {
            name: 'threeCompleteRate',
            label: '三级节点',
            value: void 0
          },
          {
            name: 'completeRate_SGZB',
            label: '施工准备类节点',
            value: void 0
          },
          {
            name: 'completeRate_SJ',
            label: '设计类节点',
            value: void 0
          },
          {
            name: 'completeRate_ZC',
            label: '招采类节点',
            value: void 0
          },
          {
            name: 'completeRate_GC',
            label: '工程类节点',
            value: void 0
          },
          {
            name: 'completeRate_JGYS',
            label: '竣工验收类节点',
            value: void 0
          }
        ]
      ]
      if (level > 1 && level < 5) {
        this.$router.push({
          path: '/construction/constructionSchedule/implementationManagement/nodeInfo',
          query: {
            level: level - 1,
            isOverdue: true,
            projectId: this.projectId,
            apiCode: this.apiCode,
            operation: 'true'
          }
        })
      } else if(level !== 5) {
        this.nodeInfoVisible = true
        this.nodeInfoData = []
        if (level === 0) {
          this.getOnTimeCompleteRateDetail(list[level])
          this.nodeInfoTitle = '节点按时完成率'
        } else {
          this.getCompleteRateDetail(list[level])
          this.nodeInfoTitle = '节点完成率'
        }
      }
    },
    /**
     * @description: 查看跳转调整
     * @param {object} row 行数据
     * @return {void}
     */
    handleView({ planId }) {
      this.$router.push({
        path: '/construction/constructionScheduleAdjust/constructionScheduleAdjustView',
        query: {
          pageType: 'detail',
          id: planId
        }
      })
    },
    /**
     * @description: 同步更新详情
     * @return {void}
     */    
    synchronousUpdateDetail(){
      if(this.planBoardDetailVisible){
        this.$refs.planBoardDetail.loadData()
      }
    },
    /**
     * @description: 同步更新日历
     * @return {void}
     */    
    synchronousUpdateCalendar(){
      if(this.planBoardCalendarVisible){
        this.$refs.planBoardCalendar.getData()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  .titleName {
    margin: 0;
  }
  .anticon {
    margin-left: 5px;
    font-size: 18px;
  }
}
.master-plan-list {
  display: flex;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 0;
  border: 1px solid #e4e4e4;
  li {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    padding: 30px 0;
    cursor: pointer;
    > div {
      width: 100%;
      text-align: center;
      margin-bottom: 40px;
      span {
        font-size: 14px;
        color: #999;
      }
      p {
        font-size: 26px;
        color: #333;
        margin-bottom: 0;
        margin-top: 20px;
        i {
          font-style: normal;
          font-size: 14px;
        }
      }
    }
    > img {
      width: 70%;
    }
  }
}
</style>